<template>
	<view style="padding: 0 30rpx;margin-top: 50rpx;">
		<view>flex-direction属性,当设置display:flex属性后，flex布局才会生效</view>
		<view class="uni-title uni-common-mt">
			flex-direction: row
			<text>\n横向布局</text>
		</view>
		<view style="display: flex;flex-direction: row;">
			<view class="flex-item uni-bg-red">chen</view>
			<view class="flex-item uni-bg-blue">wu</view>
			<view class="flex-item uni-bg-green">yang</view>
		</view>
		
		<view class="uni-title uni-common-mt">
			flex-direction: column
			<text>\n纵向布局</text>
		</view>
		<view style="display: flex;flex-direction: column;">
			<view class="flex-item-v uni-bg-red" style="padding-top: 30rpx;">chen</view>
			<view class="flex-item-v uni-bg-blue" style="margin-top: 30rpx;">wu</view>
			<view class="flex-item-v uni-bg-green">yang</view>
		</view>
		
		<view class="uni-title uni-common-mt">
			更多布局演示
			<text>\nflex布局演示</text>
		</view>
		<view>
			<view class="text">自动宽度</view>
			<view class="text" style="width: 300rpx;">固定宽度</view>
			<view style="display: flex; flex-direction:row">
				<view class="text">横向布局-自动宽度</view>
				<view class="text">横向布局-自动宽度</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: center;">
				<view class="text">横向布局-居中</view>
				<view class="text">横向布局-居中</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: flex-end;">
				<view class="text">横向布局-居右</view>
				<view class="text">横向布局-居右</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="text" style="flex: 1;">横向布局-平均分布</view>
				<view class="text" style="flex: 1;">横向布局-平均分布</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">横向布局-两边对齐</view>
				<view class="text">横向布局-两边对齐</view>
			</view>
	
			<view style="display: flex;flex-direction: row;">
				<view class="text" style="width: 200rpx;">固定宽度</view>
				<view class="text" style="flex: 1;">自动占满剩余位置</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="text" style="width: 200rpx;">固定宽度</view>
				<view class="text" style="flex: 1;">自动占满</view>
				<view class="text" style="width: 200rpx;">固定宽度</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="text" style="width: 120;flex-wrap: wrap;">一行显示不全，wrap换行</view>
				<view class="text" style="width: 120;flex-wrap: wrap;">一行显示不全，wrap换行</view>
				<view class="text" style="width: 120;flex-wrap: wrap;">一行显示不全，wrap换行</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="text" style="display: flex;height: 200rpx;justify-content: flex-start;align-items: flex-start;flex: 1;">
					<text>垂直居顶</text>
				</view>
				<view class="text" style="display: flex;height: 200rpx;justify-content: center;align-items: center;flex: 1;">
					<text>垂直居中</text>
				</view>
				<view class="text" style="display: flex;height: 200rpx;justify-content: center;align-items: flex-end;flex: 1;">
					<text>垂直居底</text>
				</view>
			</view>
			<view class="uni-title uni-common-mt">
				组合示例
				<text>\n综合布局演示</text>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="text" style="width: 200rpx;height: 200rpx;background-color: #ebebed;justify-content: center;align-items: center;display: flex;">
					<text>这里放图片</text>
				</view>
				<view style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;">
					<view class="text"><text>文字居左，留出左空间</text></view>
					<view style="display: flex;flex-direction: row;">
						<view class="text" style="flex: 1;"><text>剩余数量</text></view>
						<view class="text" style="flex: 1;"><text>立即购买</text></view>
					</view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
</script>

<style>
	.flex-item{
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	.flex-item-v{
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
	.text{
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebed;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
</style>